<template>
  <div v-if="timeLineData.length > 0 " class="info-tabs">
    <el-scrollbar class="scroll-container">
      <div class="time-line-box">
        <ol>
          <li
            v-for="(item,index) in timeLineData"
            :key="`li_keys_${index}`"
            :class="{active:activeIndex === index }"
            @click="hadleClick(index,item)"
          >
            <span class="jzrq">{{ getTime(item.jzrq) }}</span>
            <em class="circular" />
            <p class="jzlb">{{ item.jzlb }}</p>
            <p class="jzksmc">{{ item.jzksmc }}</p>
          </li>
        </ol>
      </div>
    </el-scrollbar>
  </div>
  <div v-else>
    <el-empty description="暂无数据" />
  </div>
</template>
<script>
export default {
  name: 'InfoTabs',
  props: {
    timeLineData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  mounted() {

  },
  methods: {
    hadleClick(val, row) {
      this.activeIndex = val
      this.$emit('handleTimeline', row)
    },
    getTime(value) {
      return value ? value.split(' ')[0] : ''
    }
  }
}
</script>
<style lang="scss" >
.info-tabs{
.scroll-container {
  white-space: nowrap;
  overflow: hidden;
  height: 100%;

.el-scrollbar__wrap {
  overflow-x: hidden;
}
  .el-scrollbar__view{
    padding-left:110px;
  }
}
}

</style>
<style scoped lang="scss">
.info-tabs {
  height: calc( 100vh - 186px - 50px);
  padding: 15px 10px 15px 0;
  .time-line-box {
    width: 2px;
    padding: 20px 0px;
    background: #DBDBDB;
  }
  ol{
    width:100px;
    li{
      width: 140px;
      position:relative;
      padding-left: 18px;
      margin-bottom: 40px;
      font-size: 16px;
      line-height: 20px;
      cursor: pointer;
      color: #3A352F;
      white-space: break-spaces;
      .circular{
        position:absolute;
        top:6px;
        left:-4px;
        display: inline-block;
        width: 9px;
        height:9px;
        border-radius: 9px;
        background: #05B4D8;
      }
      .jzrq{
        position:absolute;
        left: -105px;
      }
    }
    li.active,
    li:hover
    {
      color: #b7004d;
      .circular{
        background: #b7004d;
      }
    }
  }

}
</style>
